<template>
  <div class="container">
    <div class="header">
      <a-form layout="inline">
        <div style="display: flex; justify-content: space-between">
          <div style="display: flex; justify-content: end">
            <a-button v-if="techId" type="primary" @click="toOpenComments">我要评价</a-button>
            <a-button @click="handleMyFile(0)" v-if="!searchForm.techId" style="margin-left: 8px">全部</a-button>
            <a-button @click="searchReset()" style="margin-left: 8px">刷新</a-button>
            <a-button @click="handleExportExcel()" v-if="!searchForm.techId" style="margin-left: 8px">导出</a-button>
            <a-button @click="doDel" style="margin-left: 8px; color: red">删除</a-button>
          </div>
          <div style="display: flex; justify-content: end">
            <a-input-search
              v-model="searchForm.keyword"
              @search="fetchList"
              placeholder="请按照关键字进行搜索"
              style="width: 200px"
            />
            <a-button class="hte-btn del-btn" @click="showSearchForm = true">高级搜索</a-button>
          </div>
        </div>
      </a-form>

      <a-modal
        :visible="showSearchForm"
        width="70vw"
        :bodyStyle="{ padding: '10px' }"
        title="高级查询"
        @ok="handleToSearch"
        @cancel="showSearchForm = false"
      >
        <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="点评单号">
                <a-input v-model="searchForm.commentNo" allowclear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="技术编号">
                <a-input v-model="searchForm.techNo" allowclear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="技术名称">
                <a-input v-model="searchForm.techName" allowclear />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :span="8">
              <a-form-model-item label="项目编号">
                <a-input v-model="searchForm.projectNo" allowclear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="项目名称">
                <a-input v-model="searchForm.projectName" allowclear />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="技术类别">
                <a-select style="width: 100%" v-model="searchForm.techCategory">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option v-for="d in codes['技术库-技术类别（专业）']" :value="d.code" :key="d.code"
                    >{{ d.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-modal>
    </div>
    <div class="content-list">
      <a-table
        ref="table"
        bordered
        size="middle"
        rowKey="commentId"
        :columns="columns"
        :dataSource="records"
        :pagination="searchForm"
        :rowSelection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
          columnWidth: 1,
        }"
        :loading="loading"
        :scroll="{ x: true }"
        @change="handleTableChange"
      >
      </a-table>
    </div>
    <Comments ref="Comments" @afterComment="afterComment" />
  </div>
</template>

<script>
import Vue from 'vue'
import { getAction } from '@/api/manage'
import { USER_NAME } from '@/store/mutation-types'
import { Modal } from 'ant-design-vue'
import { CodesMixin } from '@/mixins/CodesMixin'
import { TableMixin } from '@/mixins/TableMixin'
import { UtilsMixin } from '@/mixins/UtilsMixin'
import { postAction } from '../../../../api/manage'
export default {
  name: 'comments',
  mixins: [CodesMixin, TableMixin, UtilsMixin],
  components: {
    Comments: () => import('@/views/tech/enginee/comments/Comments'),
  },
  data() {
    return {
      description: '工程技术库评论列表',
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'NewTechEngineeQuoteList',
      },
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: '45px',
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '点评单号',
          align: 'center',
          width: '100px',
          dataIndex: 'commentNo',
          customCell: () => {
            return this.customCellRender(100)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '适用性得分',
          align: 'center',
          width: '90px',
          dataIndex: 'score1',
          customCell: () => {
            return this.customCellRender(90)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '实用性得分',
          align: 'center',
          width: '90px',
          dataIndex: 'score3',
          customCell: () => {
            return this.customCellRender(90)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '完整性得分',
          align: 'center',
          width: '90px',
          dataIndex: 'score2',
          customCell: () => {
            return this.customCellRender(90)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '先进性得分',
          align: 'center',
          width: '90px',
          dataIndex: 'score4',
          customCell: () => {
            return this.customCellRender(90)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '点评总分',
          align: 'center',
          width: '90px',
          dataIndex: 'score',
          customCell: () => {
            return this.customCellRender(90)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '点评意见',
          align: 'center',
          width: '250px',
          dataIndex: 'comments',
          customCell: () => {
            return this.customCellRender(100)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '技术编号',
          align: 'center',
          width: '100px',
          dataIndex: 'techNo',
          customCell: () => {
            return this.customCellRender(100)
          },
          customRender: (text, record) => {
            return this.tooltipActiveRender(text, record, 'doDetail')
          },
        },
        {
          title: '技术名称',
          align: 'center',
          width: '100px',
          dataIndex: 'techName',
          customCell: () => {
            return this.customCellRender(100)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '编制人',
          align: 'center',
          width: '100px',
          dataIndex: 'compileUser',
          customCell: () => {
            return this.customCellRender(100)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '点评人',
          align: 'center',
          width: '100px',
          dataIndex: 'userName',
          customCell: () => {
            return this.customCellRender(100)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
        {
          title: '点评时间',
          align: 'center',
          width: '100px',
          dataIndex: 'commentsCreateTime',
          customCell: () => {
            return this.customCellRender(100)
          },
          customRender: (text, record) => {
            return this.tooltipRender(text, record)
          },
        },
      ],
      url: {
        list: '/hteEngineeTechLibComments/pageWithLib',
        export: '/hteEngineeTechLibComments/export',
        delete: '/hteEngineeTechLibComments/delete',
      },

      showSearchForm: false,
      keyword: '',
      labelCol: { span: 8 },
      wrapperCol: { span: 15 },
      userId: Vue.ls.get(USER_NAME),
      techId: '',
      loading: false,
    }
  },
  mounted() {
    this.fetchCodes(['工程技术库状态', '工程技术库-技术类型', '技术库-技术类别（专业）', '技术库-文件形式'])
    this.fetchList()
  },
  computed: {},
  methods: {
    setColumns(columns) {
      this.columns = columns
    },
    async fetchList() {
      this.loading = true
      let res = await postAction(this.url.list, this.searchForm)
      this.loading = false
      if (res.success) {
        this.records = res.result.records
        this.searchForm.total = res.result.total
      }
    },
    setTechId(techId) {
      this.searchForm.techId = techId
      this.techId = techId
      this.dataList = []
      this.searchForm.total = 0
      this.fetchList()
    },
    handleToSearch() {
      this.showSearchForm = false
      this.fetchList()
    },
    searchReset() {
      this.searchForm = { techId: this.techId }
      this.handleToSearch()
    },
    handleMyFile(myType) {
      this.searchForm.pageNo = 1
      this.searchForm.current = 1
      this.searchForm.myType = myType
      this.fetchList()
    },
    doDel() {
      if (this.selectedRowKeys == null || this.selectedRowKeys.length != 1) {
        this.$message.warning('请选择1条数据')
        return
      }
      let record = this.selectedRows[0]
      let that = this
      Modal.confirm({
        title: '确认删除',
        content: '此操作将删除当前工程技术库评价',
        onOk: function () {
          postAction(that.url.delete+"/"+record.commentsId).then((res) => {
            if (res.success) {
              that.$message.success('操作成功')
              that.searchReset()
            } else {
              that.$message.warning('操作失败:', res.message)
            }
          })
        },
      })
    },
    handleExportExcel() {
      let url = process.env.VUE_APP_API_BASE_URL + this.url.export + '?1=1'
      this.handleExportXls('工程技术库点评列表', url, this.searchForm)
    },
    toOpenComments() {
      this.$refs.Comments.open(this.techId)
    },
    afterComment() {
      this.fetchList()
    },
    handlehToLib() {
      let urlJump = this.$router.resolve({ path: `/engineeTech/list` })
      window.open(urlJump.href, '_blank')
    },
    doDetail(record) {
      let urlJump = this.$router.resolve({ path: `/engineeTech/edit?id=` + record.id })
      window.open(urlJump.href, '_blank')
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/common.less';
@import '~@assets/less/hte-main.less';
@import '~@assets/less/hte-main.less';
.fixed-menu {
  position: fixed;
  right: 20px;
  z-index: 1;
  width: 80px;
  top: 172px;
}

.functionMould {
  background-color: #ffffff;
  padding: 10px;
  text-align: center;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  cursor: pointer;
  &:hover {
    > span,
    > i {
      color: #146595;
    }
  }
}
.functionMould > span {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #000000;
  display: block;
}
.menu-icon {
  font-size: 24px;
  color: #31a0e1;
}
.page-main {
  .banner {
    background-image: url(~@assets/tech/techHead.png);
  }

  .container {
    .content-list {
      margin-top: 15px;
    }
  }
}
</style>
